<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>佳创业务报表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form layout="inline" :model="form" style="margin-top:0px;">
        <a-form-item label="时间">
          <select class="dateTypeSelect" v-model="dateType" @change="onChangeDateType">
            <option :value="0">请选择</option>
            <option :value="1">周报</option>
            <option :value="2">月报</option>
          </select>
          <a-range-picker style="width:220px" @change="timeChange" :value="timeValue" />
        </a-form-item>
        <a-form-item label="船名">
          <a-select v-model="form.shipId" style="width:200px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in shipNameList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="船舶类型">
          <a-select v-model="form.isSelfOperation" class="selectInputWidth">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">自营</a-select-option>
            <a-select-option :value="0">租赁</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-item>
      </a-form>
      <a-card style="text-align:center; margin-top:24px;">
        <a-row :gutter="[16]">
          <a-col :span="6" class="assent">
            <div class="assent_mes">总航次</div>
            <div class="assent_shu">{{statisticsObj.sailingTotal || 0}}</div>
          </a-col>
          <a-col :span="6" class="assent">
            <div class="assent_mes">总应收（元）</div>
            <div class="assent_shu">{{statisticsObj.receivableAmount || 0}}</div>
          </a-col>
          <a-col :span="6" class="assent">
            <div class="assent_mes">总应付（元）</div>
            <div class="assent_shu">{{statisticsObj.payableAmount || 0}}</div>
          </a-col>
          <a-col :span="6">
            <div class="assent_mes">总毛利（元）</div>
            <div class="assent_shu">{{statisticsObj.grossMargin || 0}}</div>
          </a-col>
        </a-row>
      </a-card>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :scroll="{x:1500,y:600}"
        :pagination="pagination"
        :row-key="(record,index) => index"
      ></a-table>
    </div>
  </div>
</template>
<script>
import { queryShipNameList } from '@/api'
import { queryShipBusinessReportList, queryShipBusinessReportStatistics } from '@/api/dataBI'
import { commonExport } from '@/api/request'
import moment from 'moment'
import getWeek from '@/common/getDate'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船名',
    dataIndex: 'shipName'
  },
  {
    title: '船舶类型',
    dataIndex: 'isSelfOperationName'
  },
  {
    title: '时间',
    dataIndex: 'dateRange',
    customRender: (text, record, index) => {
      return record.dateRange || '--'
    }
  },
  {
    title: '总航次',
    dataIndex: 'sailingTotal'
  },
  {
    title: '应收金额（元）',
    dataIndex: 'receivableAmount',
    customRender: (text, record, index) => {
      return record.receivableAmount.toFixed(2)
    }
  },
  {
    title: '应付金额（元）',
    dataIndex: 'payableAmount',
    customRender: (text, record, index) => {
      return record.payableAmount.toFixed(2)
    }
  },
  {
    title: '毛利（元）',
    dataIndex: 'grossMargin',
    customRender: (text, record, index) => {
      return record.grossMargin.toFixed(2)
    }
  }
]
export default {
  data () {
    return {
      dateType: 1,
      shipNameList: [],
      form: {
        shipId: '',
        isSelfOperation: '',
        startDate: '', // 开始日期
        endDate: '' // 结束日期
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      btnControl: {},
      timeValue: [],
      statisticsObj: {}
    }
  },
  methods: {
    shipNameListRequest (e) {
      queryShipNameList(e)
        .then(res => {
          this.shipNameList = res.data
        })
        .catch(rs => {})
    },
    reportStatisticsRequest (e) {
      queryShipBusinessReportStatistics(e).then(res => {
        let resData = res.data
        resData.receivableAmount = resData.receivableAmount.toFixed(2)
        resData.payableAmount = resData.payableAmount.toFixed(2)
        resData.grossMargin = resData.grossMargin.toFixed(2)
        this.statisticsObj = resData
      })
    },
    containerListRequest (e) {
      this.loading = true
      queryShipBusinessReportList(e).then(res => {
        this.data = res.data.list
        let currentPage = this.pageNum
        this.pagination = {
          current: currentPage,
          pageSize: res.data.pageSize,
          total: res.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          pageSizeOptions: ['10', '30', '50', '100', '500'],
          showTotal: total =>
            `共${total}条记录 第${currentPage}/${res.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            let paramData = {
              ...this.form,
              pageSize: this.pageSize,
              pageNum: this.pageNum

            }
            this.containerListRequest(paramData)
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            let paramData = {
              pageSize: this.pageSize,
              pageNum: this.pageNum,
              ...this.form
            }
            this.containerListRequest(paramData)
          }
        }
        setTimeout(() => {
          this.loading = false
        }, 300)
      }).catch(() => {
        setTimeout(() => {
          this.loading = false
        }, 300)
      })
    },
    onChangeDateType () {
      let dateType = this.dateType
      if (dateType === 1) {
        let startDate = getWeek.getStartDayOfWeek()
        let endDate = getWeek.getEndDayOfWeek()
        this.form.startDate = startDate
        this.form.endDate = endDate
        this.timeValue = [moment(startDate), moment(endDate)]
      } else if (dateType === 2) {
        let startDate = getWeek.getStartDayOfMonth()
        let endDate = getWeek.getEndDayOfMonth()
        this.form.startDate = startDate
        this.form.endDate = endDate
        this.timeValue = [moment(startDate), moment(endDate)]
      }
    },
    timeChange (date, dateStr) {
      this.dateType = 0
      this.timeValue = date
      this.form.startDate = dateStr[0]
      this.form.endDate = dateStr[1]
    },
    check () {
      this.pageNum = 1
      this.containerListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      this.reportStatisticsRequest({
        ...this.form
      })
    },
    excelExport () {
      commonExport('/shipReport/exportShipBusinessReportList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    }
  },
  mounted () {
    this.shipNameListRequest({})
    let startDate = getWeek.getStartDayOfWeek()
    let endDate = getWeek.getEndDayOfWeek()
    this.form.startDate = startDate
    this.form.endDate = endDate
    this.timeValue = [moment(startDate), moment(endDate)]
    setTimeout(() => {
      this.check()
    }, 1)
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;

  .dateTypeSelect {
    outline: none;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
    padding: 0 2px;
    margin-right: 5px;
  }
}
</style>
